<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- Allow script execution only from the app itself or inline stuff to
         supress the Electron default warning (and also make it safer here) -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
    <title>Quicklook</title>

    <!-- Codemirror CSS files: Codemirror, Dialog and Zettlr Theme -->
    <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../node_modules/codemirror/addon/dialog/dialog.css">
    <!-- KaTeX CSS file -->
    <link rel="stylesheet" href="../node_modules/katex/dist/katex.min.css">

    <!-- Include the geometry of the app -->
    <link rel="stylesheet" href="../common/assets/css/geometry.css">

    <!-- Include the main theme -->
    <link rel="stylesheet" id="theme-css" href="../common/assets/css/theme-berlin.css">

    <!-- And now the JS -->
    <!-- Hack for recognizing jquery (thanks to https://stackoverflow.com/a/37480521/8651046)-->
    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>

    <!-- Hack for jQuery (part 2) -->
    <script>if (window.module) module = window.module;</script>

<script>
/* global $ */
const QuicklookWindow = require('./zettlr-quicklook-window.js')
// We need a global for our renderer element
var ql

$(document).ready(function () {
  // Create the renderer
  ql = new QuicklookWindow()
})
</script>
</head>
<body>
  <div class="quicklook-standalone">
  <div class="title">
    <h1></h1>
    <div class="find">
      <input type="text" id="searchWhat">
    </div>

    <!--
      Windows window controls, taken from
      https://github.com/sidneys/electron-titlebar-windows (License: MIT)
    -->

    <div class="windows-window-controls">
      <div class="minimise">
        <svg x="0px" y="0px" viewBox="0 0 10 1">
          <rect fill="#000000" width="10" height="1"></rect>
        </svg>
      </div>
      <div class="resize">
        <svg class="maximise-svg" x="0px" y="0px" viewBox="0 0 10 10">
          <mask id="Mask">
            <rect fill="#FFFFFF" width="10" height="10"></rect>
            <path fill="#000000" d="M 3 1 L 9 1 L 9 7 L 8 7 L 8 2 L 3 2 L 3 1 z"/>
            <path fill="#000000" d="M 1 3 L 7 3 L 7 9 L 1 9 L 1 3 z"/>
          </mask>
          <path fill="#000000" d="M 2 0 L 10 0 L 10 8 L 8 8 L 8 10 L 0 10 L 0 2 L 2 2 L 2 0 z" mask="url(#Mask)"/>
        </svg>
      </div>
      <div class="close">
        <svg x="0px" y="0px" viewBox="0 0 10 10">
          <polygon fill="#000000" points="10,1 9,0 5,4 1,0 0,1 4,5 0,9 1,10 5,6 9,10 10,9 6,5"></polygon>
        </svg>
      </div>
    </div>
  </div>
  <div id="editor" class="fullscreen">
    <textarea id="cm-text" style="display:none;"></textarea>
  </div>
</div>
</body>
</html>
